/**
 * 需求4002 参与人控件可查看详情（仅审核-查看报销单详情界面）
 */
import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common";
import { Form, Modal, Table, Popover } from 'antd'

import errorMessage from "share/errorMessage";
import expenseReportService from 'containers/expense-report/expense-report.service'
import 'styles/expense-report/template/select-participant-detail.scss'

class SelectParticipantDetail extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
      columns: [
        {title: messages('expense-parent-report.key133')/*姓名*/, dataIndex: 'fullName', render: value => value? <Popover content={value}>{value}</Popover> : '-'},
        {title: messages('expense-parent-report.key134')/*性别*/, dataIndex: 'gender', width: '10%', render: value => value? <Popover content={value}>{value}</Popover> : '-'},
        {title: messages('common.user.id')/*工号*/, dataIndex: 'employeeId', render: value => value? <Popover content={value}>{value}</Popover> : '-'},
        {title: messages('expense-parent-report.key135')/*部门名称*/, dataIndex: 'departmentName', render: value => value? <Popover content={value}>{value}</Popover> : '-'},
        {title: messages('expense-parent-report.key136')/*职务*/, dataIndex: 'title', render: value => value? <Popover content={value}>{value}</Popover> : '-'},
        {title: messages('expense-parent-report.key137')/*级别*/, dataIndex: 'rank', render: value => value? <Popover content={value}>{value}</Popover> : '-'}
      ],
      data: [],
    }
  }

  //查看详情
  viewDetail = () => {
    this.setState({ visible: true });
    if (!this.state.data.length) {
      let OIDs = [];
      JSON.parse(this.props.field.value || '[]').map(item => {
        OIDs.push(item.userOID)
      });
      this.getDetail(OIDs)
    }
  };

  //获取详情
  getDetail = (OIDs) => {
    this.setState({ loading: true });
    expenseReportService.getUsersInfo(OIDs).then(res => {
      this.setState({
        loading: false,
        data: res.data || []
      })
    }).catch(e => {
      errorMessage(e.response);
      this.setState({ loading: false })
    })
  };

  render() {
    const { title } = this.props;
    const { loading, visible, columns, data } = this.state;
    return (
      <div className="select-participant-detail">
        <div>{title}<a className="view-btn" onClick={this.viewDetail}>{messages('common.detail')}</a></div>
        <Modal title={title}
               visible={visible}
               width={720}
               footer={null}
               bodyStyle={{maxHeight: 'calc(100vh - 100px)', overflow: 'auto'}}
               onCancel={() => {this.setState({ visible: false })}}>
          <div className="booking-manager-table">
            <Table rowKey={(record, index) => index}
                   loading={loading}
                   columns={columns}
                   dataSource={data}
                   pagination={false}
                   size="middle"
                   bordered />
            <div style={{marginTop: 10, fontSize: 12}}>{messages('common.total', {total: data.length})}</div>
          </div>
        </Modal>
      </div>
    )
  }
}

SelectParticipantDetail.propTypes = {
  field: React.PropTypes.object,
  title: React.PropTypes.string,
};

function mapStateToProps() {
  return { }
}

const wrappedSelectParticipantDetail = Form.create()(SelectParticipantDetail);

export default connect(mapStateToProps)(wrappedSelectParticipantDetail)
